/*!
 * Copyright 2014-2024  JetBrains s.r.o. Use of this source code is governed by the Apache 2.0 license.
 */
@import '../_tokens/index';

.button {
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  height: 40px;

  padding: var(--size-s2) 12px;

  cursor: pointer;

  letter-spacing: 0.045em;

  color: var(--color-text);

  border: none;
  border-radius: var(--size-s1);

  background-color: transparent;

  &:has(:first-child) {
    gap: var(--size-s2);

    padding: var(--size-s2);
  }

  @media (hover: hover) {
    &:hover {
      background-color: var(--color-b08);
    }
  }

  &:active {
    background-color: var(--color-key-blue);
  }

  &:disabled {
    cursor: not-allowed;

    opacity: 0.5;
  }

  &:focus-visible {
    outline: var(--focus-outline);
  }

  .theme-dark & {
    color: var(--color-text-dt);
  }

  .theme-dark &:hover {
    background-color: var(--color-w10);
  }

  &_background {
    background-color: var(--color-w100);

    .theme-dark & {
      background-color: var(--color-w10);

      &:hover {
        background-color: var(--color-w05);
      }
    }
  }

  &_dropdown {
    padding: var(--size-s2);

    font: var(--font-text-s);

    &::after {
      display: block;

      width: var(--size-m1);
      height: var(--size-m1);

      content: '';
      transform: rotate(0);

      background-image: url('../_assets/arrow-down.svg');
      background-repeat: no-repeat;
      will-change: transform;

      filter: invert(1);

      .theme-dark & {
        filter: none;
      }
    }

    &.search--close-button::after {
      @media (width < $breakpoint-desktop-min) {
        background-image: url('../_assets/cross.svg');
      }
    }
  }

  &_dropdown_active {
    color: var(--color-text-dt);
    background-color: var(--color-key-blue);

    &:hover,
    .theme-dark &:hover {
      background-color: var(--color-key-blue-hover);
    }

    &::after {
      transform: rotate(-180deg);
      filter: invert(0);
    }
  }
}
